<template>
  <div class="app-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/cms/frontend/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <router-link :to="'/cms/frontend/list?categoryId=' + article.categoryId">
          {{ categoryName }}
        </router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item>文章详情</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="main-content">
      <!-- 左侧文章详情 -->
      <div class="article-detail">
        <!-- 文章标题 -->
        <h1 class="article-title">{{ article.title }}</h1>

        <!-- 文章信息 -->
        <div class="article-meta">
          <span class="author">作者：{{ article.author }}</span>
          <span class="time">发布时间：{{ parseTime(article.publishTime) }}</span>
          <span class="views">浏览：{{ article.viewCount }}</span>
          <span class="comments">评论：{{ article.commentCount }}</span>
        </div>

        <!-- 文章内容 -->
        <div class="article-content" v-html="article.content"></div>

        <!-- 文章标签 -->
        <div class="article-tags">
          <el-tag v-for="tag in article.tags" :key="tag.tagId" size="small">{{ tag.tagName }}</el-tag>
        </div>

        <!-- 点赞和分享 -->
        <div class="article-actions">
          <el-button 
            type="primary" 
            icon="el-icon-thumb" 
            @click="handleLike"
            :class="{ liked: isLiked }"
          >
            {{ isLiked ? '已点赞' : '点赞' }} ({{ article.likeCount }})
          </el-button>
          <el-button type="info" icon="el-icon-share" @click="handleShare">分享</el-button>
        </div>

        <!-- 上下篇文章 -->
        <div class="article-nav">
          <div class="prev-article" v-if="prevArticle">
            <span>上一篇：</span>
            <router-link :to="'/cms/frontend/detail/' + prevArticle.articleId">
              {{ prevArticle.title }}
            </router-link>
          </div>
          <div class="next-article" v-if="nextArticle">
            <span>下一篇：</span>
            <router-link :to="'/cms/frontend/detail/' + nextArticle.articleId">
              {{ nextArticle.title }}
            </router-link>
          </div>
        </div>

        <!-- 评论区域 -->
        <div class="comment-section">
          <h3>评论 ({{ article.commentCount }})</h3>
          
          <!-- 发表评论 -->
          <div class="comment-form">
            <el-form :model="commentForm" :rules="commentRules" ref="commentForm">
              <el-form-item prop="content">
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入评论内容"
                  v-model="commentForm.content">
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitComment">发表评论</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 评论列表 -->
          <div class="comment-list">
            <div class="comment-item" v-for="comment in commentList" :key="comment.commentId">
              <div class="comment-avatar">
                <i class="el-icon-user-solid"></i>
              </div>
              <div class="comment-content">
                <div class="comment-header">
                  <span class="comment-user">{{ comment.userName }}</span>
                  <span class="comment-time">{{ parseTime(comment.createTime) }}</span>
                </div>
                <div class="comment-text">{{ comment.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧边栏 -->
      <div class="sidebar">
        <!-- 相关文章 -->
        <div class="sidebar-block">
          <h3>相关文章</h3>
          <ul class="related-articles">
            <li v-for="related in relatedArticles" :key="related.articleId">
              <router-link :to="'/cms/frontend/detail/' + related.articleId">
                {{ related.title }}
              </router-link>
            </li>
          </ul>
        </div>

        <!-- 热门文章 -->
        <div class="sidebar-block">
          <h3>热门文章</h3>
          <ul class="hot-articles">
            <li v-for="hot in hotArticles" :key="hot.articleId">
              <router-link :to="'/cms/frontend/detail/' + hot.articleId">
                {{ hot.title }}
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FrontendDetail",
  data() {
    return {
      // 文章ID
      articleId: null,
      // 文章信息
      article: {
        title: "",
        author: "",
        publishTime: null,
        viewCount: 0,
        likeCount: 0,
        commentCount: 0,
        content: "",
        tags: [],
        categoryId: null
      },
      // 分类名称
      categoryName: "",
      // 是否已点赞
      isLiked: false,
      // 上一篇文章
      prevArticle: null,
      // 下一篇文章
      nextArticle: null,
      // 相关文章
      relatedArticles: [],
      // 热门文章
      hotArticles: [],
      // 评论列表
      commentList: [],
      // 评论表单
      commentForm: {
        content: ""
      },
      // 评论表单校验规则
      commentRules: {
        content: [
          { required: true, message: "请输入评论内容", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.articleId = this.$route.params.articleId;
    this.getArticleDetail();
    this.getRelatedArticles();
    this.getHotArticles();
    this.getCommentList();
  },
  methods: {
    /** 获取文章详情 */
    getArticleDetail() {
      // 模拟数据
      this.article = {
        articleId: this.articleId,
        title: "若依CMS系统正式发布",
        author: "若依科技",
        publishTime: new Date(),
        viewCount: 128,
        likeCount: 15,
        commentCount: 8,
        content: "<p>若依CMS内容管理系统正式发布，提供强大的内容管理功能。</p><p>系统基于若依框架开发，具有以下特点：</p><ul><li>界面美观，操作简单</li><li>功能完善，易于扩展</li><li>安全可靠，性能优越</li></ul>",
        tags: [
          { tagId: 1, tagName: "系统发布" },
          { tagId: 2, tagName: "CMS" }
        ],
        categoryId: 1
      };
      
      this.categoryName = "系统公告";
      
      // 设置上下篇文章
      this.prevArticle = {
        articleId: 2,
        title: "如何使用若依CMS管理系统"
      };
      
      this.nextArticle = {
        articleId: 3,
        title: "若依CMS系统功能介绍"
      };
    },
    /** 获取相关文章 */
    getRelatedArticles() {
      // 模拟数据
      this.relatedArticles = [
        { articleId: 2, title: "如何使用若依CMS管理系统" },
        { articleId: 3, title: "若依CMS系统功能介绍" },
        { articleId: 4, title: "若依CMS系统更新日志" }
      ];
    },
    /** 获取热门文章 */
    getHotArticles() {
      // 模拟数据
      this.hotArticles = [
        { articleId: 1, title: "若依CMS系统正式发布" },
        { articleId: 2, title: "如何使用若依CMS管理系统" },
        { articleId: 3, title: "若依CMS系统功能介绍" },
        { articleId: 4, title: "若依CMS系统更新日志" }
      ];
    },
    /** 获取评论列表 */
    getCommentList() {
      // 模拟数据
      this.commentList = [
        {
          commentId: 1,
          userName: "用户A",
          createTime: new Date(),
          content: "这篇文章写得真好，学到了很多知识！"
        },
        {
          commentId: 2,
          userName: "用户B",
          createTime: new Date(),
          content: "感谢分享，期待更多内容。"
        }
      ];
    },
    /** 点赞处理 */
    handleLike() {
      if (this.isLiked) {
        this.article.likeCount--;
        this.isLiked = false;
      } else {
        this.article.likeCount++;
        this.isLiked = true;
      }
    },
    /** 分享处理 */
    handleShare() {
      this.$message.success("分享功能待实现");
    },
    /** 提交评论 */
    submitComment() {
      this.$refs.commentForm.validate(valid => {
        if (valid) {
          this.$message.success("评论发表成功");
          // 重置表单
          this.commentForm.content = "";
        }
      });
    }
  }
};
</script>

<style scoped>
.el-breadcrumb {
  margin-bottom: 20px;
  padding: 10px 0;
  background: #f5f5f5;
  border-radius: 4px;
}

.main-content {
  display: flex;
  flex-direction: row;
}

.article-detail {
  flex: 3;
  margin-right: 20px;
}

.article-title {
  font-size: 24px;
  color: #333;
  margin: 0 0 15px 0;
  line-height: 1.3;
}

.article-meta {
  font-size: 14px;
  color: #999;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.article-meta span {
  margin-right: 15px;
}

.article-content {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 30px;
}

.article-content >>> img {
  max-width: 100%;
  height: auto;
}

.article-tags {
  margin-bottom: 20px;
}

.article-tags .el-tag {
  margin-right: 8px;
}

.article-actions {
  margin-bottom: 30px;
  padding: 20px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.article-actions .el-button {
  margin-right: 10px;
}

.article-actions .liked {
  background-color: #409EFF;
  border-color: #409EFF;
}

.article-nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  padding: 20px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.article-nav a {
  color: #409EFF;
  text-decoration: none;
}

.comment-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.comment-item {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #eee;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: #999;
  font-size: 20px;
}

.comment-content {
  flex: 1;
}

.comment-header {
  margin-bottom: 10px;
}

.comment-user {
  font-weight: bold;
  margin-right: 15px;
}

.comment-time {
  color: #999;
  font-size: 14px;
}

.comment-text {
  color: #333;
  line-height: 1.6;
}

.sidebar {
  flex: 1;
}

.sidebar-block {
  background: #f8f9fa;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
}

.sidebar-block h3 {
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.related-articles,
.hot-articles {
  list-style: none;
  padding: 0;
  margin: 0;
}

.related-articles li,
.hot-articles li {
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
}

.related-articles li:last-child,
.hot-articles li:last-child {
  border-bottom: none;
}

.related-articles a,
.hot-articles a {
  color: #666;
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.related-articles a:hover,
.hot-articles a:hover {
  color: #409EFF;
}
</style>